<!--
 * Description: FD 对比详情
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Qiuxue.Wu
 * Date: 2020/06/23 14:23
-->

<template>
  <div>
    <!--数据表单-->
    <el-row>
      <el-col class="title" :span="12">
        {{
          `${inputData.left.fdId}  ${inputData.left.version}  ${queryForm.fdNBLeft} 行号(${Number(
            inputData.right.relateLeftRowIndex
          ) + 1})`
        }}
      </el-col>
      <el-col class="title" :span="12">
        {{
          `${queryForm.fdIdRight}  ${queryForm.fdVersionRight}  ${
            queryForm.fdNBRight
          } 行号(${Number(inputData.right.rightRowIndex) + 1})`
        }}
      </el-col>
    </el-row>
    <el-form label-width="120px" :model="inputData" size="mini">
      <el-row>
        <!-- left -->
        <el-col :span="12">
          <el-row>
            <el-col :span="24">
              <el-form-item label="Part Name">
                <span>
                  {{
                    queryForm.fdNBLeft === 'New'
                      ? inputData.left.newPartName
                      : inputData.left.basePartName
                  }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="Part Number">
                <span>
                  {{
                    queryForm.fdNBLeft === 'New'
                      ? inputData.left.newPartNo
                      : inputData.left.basePartNo
                  }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="Part Description">
                <span>
                  {{
                    queryForm.fdNBLeft === 'New'
                      ? inputData.left.newPartDesc
                      : inputData.left.basePartDesc
                  }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="Material Type">
                <span>
                  {{
                    queryForm.fdNBLeft === 'New'
                      ? inputData.left.newMaterialType
                      : inputData.left.baseMaterialType
                  }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="Material Color">
                <span>
                  {{
                    queryForm.fdNBLeft === 'New'
                      ? inputData.left.newMaterialColor
                      : inputData.left.baseMaterialColor
                  }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="Size">
                <span>
                  {{
                    queryForm.fdNBLeft === 'New' ? inputData.left.newSize : inputData.left.baseSize
                  }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="Qty">
                <span>
                  {{
                    queryForm.fdNBLeft === 'New' ? inputData.left.newQty : inputData.left.baseQty
                  }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="ID Process">
                <span>
                  {{
                    queryForm.fdNBLeft === 'New'
                      ? inputData.left.newIdProcess
                      : inputData.left.baseIdProcess
                  }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="Supplier">
                <span>
                  {{
                    queryForm.fdNBLeft === 'New'
                      ? inputData.left.newSupplier
                      : inputData.left.baseSupplier
                  }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="Supplier PN">
                <span>
                  {{
                    queryForm.fdNBLeft === 'New'
                      ? inputData.left.newSupplierPn
                      : inputData.left.baseSupplierPn
                  }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="Remarks">
                <span>
                  {{
                    queryForm.fdNBLeft === 'New'
                      ? inputData.left.newRemark
                      : inputData.left.baseRemark
                  }}
                </span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <!-- right -->
        <el-col :span="12">
          <el-row>
            <el-col :span="24">
              <el-form-item label="Part Name">
                <span>
                  {{
                    queryForm.fdNBRight === 'New'
                      ? inputData.right.newPartName
                      : inputData.right.basePartName
                  }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="Part Number">
                <span>
                  {{
                    queryForm.fdNBRight === 'New'
                      ? inputData.right.newPartNo
                      : inputData.right.basePartNo
                  }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="Part Description">
                <span>
                  {{
                    queryForm.fdNBRight === 'New'
                      ? inputData.right.newPartDesc
                      : inputData.right.basePartDesc
                  }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="Material Type">
                <span>
                  {{
                    queryForm.fdNBRight === 'New'
                      ? inputData.right.newMaterialType
                      : inputData.right.baseMaterialType
                  }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="Material Color">
                <span>
                  {{
                    queryForm.fdNBRight === 'New'
                      ? inputData.right.newMaterialColor
                      : inputData.right.baseMaterialColor
                  }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="Size">
                <span>
                  {{
                    queryForm.fdNBRight === 'New'
                      ? inputData.right.newSize
                      : inputData.right.baseSize
                  }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="Qty">
                <span>
                  {{
                    queryForm.fdNBRight === 'New' ? inputData.right.newQty : inputData.right.baseQty
                  }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="ID Process">
                <span>
                  {{
                    queryForm.fdNBRight === 'New'
                      ? inputData.right.newIdProcess
                      : inputData.right.baseIdProcess
                  }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="Supplier">
                <span>
                  {{
                    queryForm.fdNBRight === 'New'
                      ? inputData.right.newSupplier
                      : inputData.right.baseSupplier
                  }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="Supplier PN">
                <span>
                  {{
                    queryForm.fdNBRight === 'New'
                      ? inputData.right.newSupplierPn
                      : inputData.right.baseSupplierPn
                  }}
                </span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="Remarks">
                <span>
                  {{
                    queryForm.fdNBRight === 'New'
                      ? inputData.right.newRemark
                      : inputData.right.baseRemark
                  }}
                </span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'FdCompareDetail',
  props: {
    inputData: {
      type: Object,
      default: () => {}
    },
    queryForm: {
      type: Object,
      default: () => {}
    },
    fdCompareResultList: {
      type: Array,
      default: () => []
    }
  },
  mounted() {
    this.inputData.left = this.fdCompareResultList[this.inputData.right.relateLeftRowIndex].left
  },
  methods: {
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-form-item__content {
  span {
    margin-left: 5px !important;
    color: blue !important;
  }
}
.title {
  display: flex;
  justify-content: center;
  height: 40px;
  font-weight: 700;
  color: #333;
  font-size: 16px;
}
</style>
